<template>
  <view class="jobs-list-page">
    
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { formatSalary, formatExperience, formatEducation, formatRelativeTime, debounce } from '@/utils'

export default {
  name: 'JobsListPage',
  data() {
    return {
      searchKeyword: '',
      selectedCity: '',
      selectedSalary: '',
      selectedExperience: '',
      selectedEducation: '',
      sortType: 'default', // default, salary, publishTime
      sortOrder: 'desc', // asc, desc
      isLoading: false,
      hasMore: true,
      
      // 筛选弹窗状态
      showCityModal: false,
      showSalaryModal: false,
      showExperienceModal: false,
      showEducationModal: false,
      
      // 筛选选项
      cityColumns: [
        ['不限', '北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都', '西安']
      ],
      salaryColumns: [
        ['不限', '3K以下', '3K-5K', '5K-10K', '10K-15K', '15K-25K', '25K-50K', '50K以上']
      ],
      experienceColumns: [
        ['不限', '应届毕业生', '1年以下', '1-3年', '3-5年', '5-10年', '10年以上']
      ],
      educationColumns: [
        ['不限', '初中及以下', '中专/中技', '高中', '大专', '本科', '硕士', '博士']
      ]
    }
  },
  computed: {
    ...mapGetters('jobs', ['jobList', 'searchParams'])
  },
  onLoad(options) {
    // 处理从其他页面传递的参数
    if (options.keyword) {
      this.searchKeyword = decodeURIComponent(options.keyword)
    }
    if (options.city) {
      this.selectedCity = decodeURIComponent(options.city)
    }
    
    this.initPage()
  },
  onShow() {
    // 页面显示时刷新收藏状态
    this.refreshFavoriteStatus()
  },
  onPullDownRefresh() {
    this.refresh()
  },
  onReachBottom() {
    this.loadMore()
  },
  methods: {
    ...mapActions('jobs', ['getJobList', 'searchJobs', 'favoriteJob', 'unfavoriteJob']),
    
    formatSalary,
    formatExperience,
    formatEducation,
    formatRelativeTime,

    // 初始化页面
    async initPage() {
      this.isLoading = true
      try {
        await this.searchJobs(this.buildSearchParams())
      } catch (error) {
        console.error('加载职位列表失败:', error)
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'error'
        })
      } finally {
        this.isLoading = false
      }
    },

    // 刷新数据
    async refresh() {
      this.hasMore = true
      try {
        await this.searchJobs(this.buildSearchParams())
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        })
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'error'
        })
      } finally {
        uni.stopPullDownRefresh()
      }
    },

    // 加载更多
    async loadMore() {
      if (this.isLoading || !this.hasMore) return
      
      this.isLoading = true
      try {
        const response = await this.getJobList({ isRefresh: false })
        if (!response.data || response.data.length === 0) {
          this.hasMore = false
        }
      } catch (error) {
        console.error('加载更多失败:', error)
      } finally {
        this.isLoading = false
      }
    },

    // 构建搜索参数
    buildSearchParams() {
      return {
        keyword: this.searchKeyword,
        city: this.selectedCity === '不限' ? '' : this.selectedCity,
        salaryRange: this.selectedSalary === '不限' ? '' : this.selectedSalary,
        experience: this.selectedExperience === '不限' ? '' : this.selectedExperience,
        education: this.selectedEducation === '不限' ? '' : this.selectedEducation,
        sortType: this.sortType,
        sortOrder: this.sortOrder,
        page: 1
      }
    },

    // 处理搜索
    handleSearch() {
      this.debouncedSearch()
    },

    // 防抖搜索
    debouncedSearch: debounce(function() {
      this.initPage()
    }, 500),

    // 搜索输入处理
    onSearchInput() {
      // 实时搜索（可选）
      // this.debouncedSearch()
    },

    // 清除搜索
    clearSearch() {
      this.searchKeyword = ''
      this.handleSearch()
    },

    // 显示筛选器
    showCityPicker() {
      this.showCityModal = true
    },

    showSalaryPicker() {
      this.showSalaryModal = true
    },

    showExperiencePicker() {
      this.showExperienceModal = true
    },

    showEducationPicker() {
      this.showEducationModal = true
    },

    showMoreFilters() {
      uni.showToast({
        title: '高级筛选开发中',
        icon: 'none'
      })
    },

    // 确认筛选选择
    confirmCity(value) {
      this.selectedCity = value.value[0]
      this.showCityModal = false
      this.handleSearch()
    },

    confirmSalary(value) {
      this.selectedSalary = value.value[0]
      this.showSalaryModal = false
      this.handleSearch()
    },

    confirmExperience(value) {
      this.selectedExperience = value.value[0]
      this.showExperienceModal = false
      this.handleSearch()
    },

    confirmEducation(value) {
      this.selectedEducation = value.value[0]
      this.showEducationModal = false
      this.handleSearch()
    },

    // 改变排序方式
    changeSortType(type) {
      if (this.sortType === type) {
        // 切换排序顺序
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortType = type
        this.sortOrder = type === 'salary' ? 'desc' : 'desc'
      }
      this.handleSearch()
    },

    // 重置筛选条件
    resetFilters() {
      this.searchKeyword = ''
      this.selectedCity = ''
      this.selectedSalary = ''
      this.selectedExperience = ''
      this.selectedEducation = ''
      this.sortType = 'default'
      this.sortOrder = 'desc'
      this.handleSearch()
    },

    // 切换收藏状态
    async toggleFavorite(job) {
      try {
        if (job.isFavorited) {
          await this.unfavoriteJob(job.id)
          job.isFavorited = false
          uni.showToast({
            title: '已取消收藏',
            icon: 'success'
          })
        } else {
          await this.favoriteJob(job.id)
          job.isFavorited = true
          uni.showToast({
            title: '收藏成功',
            icon: 'success'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'error'
        })
      }
    },

    // 刷新收藏状态
    refreshFavoriteStatus() {
      // TODO: 从服务器更新收藏状态
    },

    // 跳转到职位详情
    goToJobDetail(jobId) {
      uni.navigateTo({
        url: `/pages/jobs/detail?id=${jobId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.jobs-list-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .search-header {
    background-color: #fff;
    padding: 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .search-container {
      display: flex;
      align-items: center;
      
      .search-input-wrapper {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        background-color: #f8f9fa;
        border-radius: 20rpx;
        padding: 16rpx 20rpx;
        margin-right: 20rpx;
        
        .search-input {
          flex: 1;
          margin-left: 16rpx;
          font-size: 28rpx;
          color: #333;
          background: none;
          border: none;
          
          &::placeholder {
            color: #999;
          }
        }
        
        .clear-btn {
          margin-left: 16rpx;
        }
      }
      
      .search-btn {
        padding: 16rpx 32rpx;
        background-color: #007AFF;
        color: #fff;
        border-radius: 20rpx;
        font-size: 28rpx;
      }
    }
  }
  
  .filter-bar {
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    
    .filter-scroll {
      .filter-list {
        display: flex;
        padding: 20rpx 24rpx;
        
        .filter-item {
          display: flex;
          align-items: center;
          padding: 16rpx 20rpx;
          margin-right: 20rpx;
          background-color: #f8f9fa;
          border-radius: 16rpx;
          white-space: nowrap;
          
          &.more-filter {
            background-color: #e6f4ff;
            border: 1rpx solid #b3d8ff;
          }
          
          .filter-text {
            font-size: 26rpx;
            color: #333;
            margin-right: 8rpx;
          }
        }
      }
    }
  }
  
  .sort-bar {
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f0;
    
    .sort-list {
      display: flex;
      padding: 20rpx 24rpx;
      
      .sort-item {
        display: flex;
        align-items: center;
        padding: 12rpx 24rpx;
        margin-right: 32rpx;
        
        &.active {
          .sort-text {
            color: #007AFF;
            font-weight: 600;
          }
        }
        
        .sort-text {
          font-size: 26rpx;
          color: #666;
          margin-right: 8rpx;
        }
      }
    }
  }
  
  .jobs-container {
    flex: 1;
    
    .jobs-list {
      .job-card {
        margin: 20rpx;
        padding: 32rpx;
        background-color: #fff;
        border-radius: 16rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
        
        .job-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 24rpx;
          
          .job-basic {
            flex: 1;
            
            .job-title {
              display: block;
              font-size: 36rpx;
              font-weight: 600;
              color: #333;
              margin-bottom: 12rpx;
              line-height: 1.3;
            }
            
            .job-salary {
              font-size: 32rpx;
              font-weight: 600;
              color: #FF6B35;
            }
          }
          
          .job-actions {
            .favorite-btn {
              padding: 8rpx;
            }
          }
        }
        
        .company-info {
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;
          
          .company-logo {
            width: 60rpx;
            height: 60rpx;
            border-radius: 12rpx;
            margin-right: 20rpx;
          }
          
          .company-details {
            flex: 1;
            
            .company-name {
              display: block;
              font-size: 28rpx;
              font-weight: 500;
              color: #333;
              margin-bottom: 8rpx;
            }
            
            .company-meta {
              display: flex;
              align-items: center;
              
              .company-scale {
                font-size: 24rpx;
                color: #666;
                margin-right: 16rpx;
              }
              
              .company-financing {
                font-size: 22rpx;
                color: #007AFF;
                background-color: #f0f9ff;
                padding: 4rpx 12rpx;
                border-radius: 8rpx;
              }
            }
          }
        }
        
        .job-requirements {
          display: flex;
          margin-bottom: 20rpx;
          
          .requirement-tag {
            font-size: 24rpx;
            color: #666;
            background-color: #f8f9fa;
            padding: 8rpx 16rpx;
            border-radius: 12rpx;
            margin-right: 12rpx;
          }
        }
        
        .skill-tags {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 24rpx;
          
          .skill-tag {
            font-size: 22rpx;
            color: #007AFF;
            background-color: #f0f9ff;
            border: 1rpx solid #e6f4ff;
            padding: 6rpx 12rpx;
            border-radius: 10rpx;
            margin-right: 12rpx;
            margin-bottom: 8rpx;
          }
          
          .skill-more {
            font-size: 22rpx;
            color: #999;
            background-color: #f5f5f5;
            padding: 6rpx 12rpx;
            border-radius: 10rpx;
          }
        }
        
        .job-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .job-meta {
            display: flex;
            align-items: center;
            
            .publish-time {
              font-size: 22rpx;
              color: #999;
              margin-right: 24rpx;
            }
            
            .view-count {
              font-size: 22rpx;
              color: #999;
            }
          }
          
          .job-status {
            display: flex;
            
            .status-tag {
              font-size: 20rpx;
              padding: 4rpx 8rpx;
              border-radius: 6rpx;
              margin-left: 8rpx;
              
              &.hot {
                color: #ff4757;
                background-color: #ffe6e9;
              }
              
              &.urgent {
                color: #ff6b35;
                background-color: #fff4e6;
              }
              
              &.new {
                color: #28a745;
                background-color: #e6f9e6;
              }
            }
          }
        }
      }
    }
    
    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 60rpx;
      
      .loading-text {
        margin-top: 20rpx;
        font-size: 26rpx;
        color: #999;
      }
    }
    
    .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 120rpx 60rpx;
      
      .empty-image {
        width: 240rpx;
        height: 240rpx;
        margin-bottom: 40rpx;
      }
      
      .empty-text {
        font-size: 32rpx;
        color: #666;
        margin-bottom: 16rpx;
      }
      
      .empty-tip {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 40rpx;
      }
      
      .empty-actions {
        .reset-btn {
          padding: 16rpx 40rpx;
          background-color: #007AFF;
          color: #fff;
          border-radius: 20rpx;
          font-size: 28rpx;
        }
      }
    }
    
    .load-more {
      padding: 40rpx;
      text-align: center;
      
      .load-more-btn {
        padding: 20rpx 40rpx;
        background-color: #f8f9fa;
        border: 1rpx solid #e9ecef;
        border-radius: 20rpx;
        
        .load-more-text {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
    
    .no-more {
      padding: 40rpx;
      text-align: center;
      
      .no-more-text {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
}
</style>